<template>
  <el-card class="searchForm">
    <el-form
      ref="formEl"
      :inline="true"
      :model="form"
      label-position="left"
      label-suffix="："
      label-width="150px"
    >
      <el-row>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item label="EntityId" prop="entityId">
            <el-input v-model="form.entityId" />
          </el-form-item>
        </el-col>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item label="EntityTypeFullName" prop="entityTypeFullName">
            <el-input v-model="form.entityTypeFullName" />
          </el-form-item>
        </el-col>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item label="AuditLogId" prop="auditLogId">
            <el-input v-model="form.auditLogId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item label="变更类型" prop="changeType">
            <el-select v-model="form.changeType">
              <el-option label="全部" value="" />
              <el-option :value="EntityLogEnum['新增']" label="新增" />
              <el-option :value="EntityLogEnum['修改']" label="修改" />
              <el-option :value="EntityLogEnum['删除']" label="删除" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item label="起始时间" prop="date">
            <DatePicker
              style="width: 90%"
              v-model="form.date"
              :default-time="[
                new Date(2000, 1, 1, 24, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
              ]"
              end-placeholder="结束日期"
              format="YYYY-MM-DD HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="layoutSetting.lg" :md="layoutSetting.md">
          <el-form-item>
            <el-button type="primary" @click="handleSearch"> 查询 </el-button>
            <el-button @click="handleClear"> 重置 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { PropType, ref, watch } from 'vue'

import DatePicker from '@/components/DatePicker/index.vue'
import { EntityLogEnum } from '@/http/types/entityChangeLog'
import { IElForm } from '@/types/element-plus'

const layoutSetting = {
  lg: 8,
  md: 12,
}

interface IFormData {
  auditLogId: string
  date: [string | Date, string | Date]
  changeType: number | ''
  entityId: string
  entityTypeFullName: string
}

const props = defineProps({
  formData: {
    type: Object as PropType<IFormData>,
    required: true,
  },
})
interface EmitsType {
  (e: 'update:formData', value: IFormData): void
  (e: 'search'): void
}
const emit = defineEmits<EmitsType>()

const form = ref<IFormData>(props.formData)

watch(form, () => {
  emit('update:formData', form.value)
})

const handleSearch = () => {
  emit('search')
}
const formEl = ref<IElForm>()
const handleClear = () => {
  formEl.value?.resetFields() // 清除表单数据
  handleSearch()
}
</script>

<style lang="scss" scoped>
.searchForm {
  margin-bottom: 10px;
}
</style>
